<script lang="ts">
export default {
  name: "admin_user"
}
</script>

<template>
  <div>
    <t-table row-key="id" :data="data.list" :columns="UserTableColumns"
             bordered hover stripe paginationAffixedBottom size="small"
             :loading="data.Loading" tableLayout="auto"
             @change="OnFilterChange" disableDataPage
             v-model:selectedRowKeys="data.select"
             :pagination="{total: data.total,pageSizeOptions:[10,20,50,100,200,500,1000]}">
      <template #cmd="db">
        <t-space :size="8">
          <UserCoin :id="db.row.id" :cur="db.row.profile.coin" @success="GetUserList"/>
          <UserHistory :id="db.row.id"/>
          <UserSetting :id="db.row.id" :role="db.row.profile.role.id" :vip="db.row.vip" :name="db.row.admin_name"
                       :lock="db.row.lock"
                       @success="GetUserList"/>
          <RoleMenu :id="db.row.profile.role.id" :user_id="db.row.id"/>
        </t-space>
      </template>
      <template #id="db">
        <t-tag size="small" theme="default">{{ db.row.id }}</t-tag>
      </template>
      <template #username="db">
        <t-tag theme="primary" variant="light" shape="round" size="small">
          <template #icon>
            <UserIcon/>
          </template>
          {{ db.row.username }}
        </t-tag>
      </template>
      <template #admin_name="db">
        <t-tag size="small" theme="default">{{ db.row.admin_name }}</t-tag>
      </template>
      <template #lock="db">
        <template v-if="db.row.lock === 1">
          <t-tag theme="success" variant="light-outline" shape="round" size="small">
            <template #icon>
              <CheckCircleFilledIcon/>
            </template>
            正常
          </t-tag>
        </template>
        <template v-else>
          <t-tag theme="danger" variant="light-outline" shape="round" size="small">
            <template #icon>
              <CloseCircleFilledIcon/>
            </template>
            锁定
          </t-tag>
        </template>
      </template>
      <template #role="db">
        <t-tooltip
            :content="`【${db.row.profile.role.id}】【${db.row.profile.role.key}】【${db.row.profile.role.name}】`">
          <template v-if="db.row.profile.role.id === 1">
            <t-tag theme="danger" variant="light-outline" shape="round" size="small">
              <template #icon>
                <StarFilledIcon/>
              </template>
              {{ db.row.profile.role.name }}
            </t-tag>
          </template>
          <template v-else-if="db.row.profile.role.id === 2">
            <t-tag theme="warning" variant="light-outline" shape="round" size="small">
              <template #icon>
                <StarIcon/>
              </template>
              {{ db.row.profile.role.name }}
            </t-tag>
          </template>
          <template v-else>
            <t-tag theme="success" variant="light-outline" shape="round" size="small">
              <template #icon>
                <UserIcon/>
              </template>
              {{ db.row.profile.role.name }}
            </t-tag>
          </template>
        </t-tooltip>
      </template>
      <template #vip="db">
        <VipIcon :vip="db.row.vip"/>
      </template>
      <template #coin="db">
        <div class="r-fx-row-ybz">
          <t-tooltip :content="`${(db.row.profile.coin/10000).toFixed(2)} 万`">
            <t-tag theme="warning" variant="light-outline" shape="round" size="small">
              <template #icon>
                <MoneyIcon/>
              </template>
              {{ db.row.profile.coin.toFixed(2) }}
            </t-tag>
          </t-tooltip>
        </div>
      </template>
      <template #created_at="db">
        <t-tag size="small" theme="default">
          <template #icon>
            <TimeFilledIcon/>
          </template>
          {{ toLocalTimeByTimeSecond(db.row.created_at).substring(0, 20) }}
        </t-tag>
      </template>
      <template #topContent>
        <t-space style="margin-bottom: 0.6em">
          <t-button @click="GetUserList" theme="primary" size="small">
            <template #icon>
              <RefreshIcon/>
            </template>
            刷新列表
          </t-button>
          <template v-if="data.select.length > 0">
            <t-tag size="small" theme="success" variant="light-outline">
              已选中用户总积分：{{ selectUserCoinSum.toLocaleString() }} 积分
            </t-tag>
            <t-tag size="small" theme="success" variant="light-outline">
              {{ (selectUserCoinSum / 10000).toFixed(4) }}万
            </t-tag>
            <t-tag size="small" theme="success" variant="light-outline">
              {{ (selectUserCoinSum / 100000000).toFixed(4) }}亿
            </t-tag>
          </template>
        </t-space>
      </template>
    </t-table>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from "vue";
import api from "../../../api/api";
import {
  RefreshIcon, TimeFilledIcon,
  UserIcon, MoneyIcon,
  CheckCircleFilledIcon,
  CloseCircleFilledIcon,
  StarFilledIcon, StarIcon,
} from "tdesign-icons-vue-next";
import {User} from "../../../tool/types";
import {PrimaryTableCol, TableChangeData} from "tdesign-vue-next";
import {toLocalTimeByTimeSecond} from "../../../tool/time";
import UserCoin from "./user/coin.vue"
import UserSetting from "./user/setting.vue"
import UserHistory from "./user/history.vue"
import RoleMenu from "./user/menu.vue"
import VipIcon from "../../components/vip.vue"

const data = reactive({
  Loading: false,
  query: {
    id: 0,
    page: 1,
    size: 10,
    username: ""
  },
  list: new Array<User>(),
  total: 0,
  select: []
})

//获取用户列表
const GetUserList = async () => {
  data.Loading = true
  let res = await api.Admin.User.GetUserList({
    id: data.query.id,
    page: data.query.page,
    size: data.query.size,
    username: data.query.username
  })
  if (res != null) {
    data.list = res.data
    data.total = res.other
  }
  data.Loading = false
}

//响应点击了筛选
const OnFilterChange = async (p: TableChangeData) => {
  if (p.pagination) {
    if (p.pagination.current) {
      data.query.page = Number(p.pagination.current) || 1
    }
    if (p.pagination.pageSize) {
      data.query.size = Number(p.pagination.pageSize) || 10
    }
  }
  if (p.filter) {
    if (p.filter.id) {
      data.query.id = Number(p.filter.id) || 0
    } else {
      data.query.id = 0
    }
    if (p.filter.username) {
      data.query.username = p.filter.username
    } else {
      data.query.username = ""
    }
  }
  await GetUserList()
}

//计算选中用户的总积分
const selectUserCoinSum = ref(0)
watch(() => data.select, () => {
  let sum = 0
  selectUserCoinSum.value = 0
  data.select.forEach(it => {
    for (let i = 0; i < data.list.length; i++) {
      if (data.list[i].id === it) {
        sum += data.list[i].profile?.coin || 0
      }
    }
  })
  selectUserCoinSum.value = sum
})

const UserTableColumns: Array<PrimaryTableCol> = [
  {
    align: 'center',
    colKey: 'row-select',
    width: '50',
    type: 'multiple',
  },
  {
    colKey: 'id',
    align: 'center',
    title: 'ID',
    width: "70",
    filter: {
      type: 'input',
      props: {placeholder: 'ID：纯数字'},
      showConfirmAndReset: true,
    }
  },
  {
    colKey: 'username',
    align: 'center',
    title: '用户名',
    width: "150",
    filter: {
      type: 'input',
      props: {placeholder: '用户名：*通配符'},
      showConfirmAndReset: true,
    }
  },
  {
    colKey: 'admin_name',
    align: 'center',
    title: '备注姓名',
    width: '100'
  },
  {
    colKey: 'lock',
    align: 'center',
    title: '状态',
    width: '70'
  },
  {
    colKey: 'role',
    align: 'center',
    title: '权限角色',
    width: '130'
  },
  {
    colKey: 'vip',
    align: 'center',
    title: 'VIP',
    width: '50'
  },
  {
    colKey: 'coin',
    align: 'center',
    title: '积分',
    width: '150'
  },
  {
    colKey: 'created_at',
    align: 'center',
    title: '注册时间',
    width: '180'
  },
  {
    colKey: 'cmd',
    title: '操作'
  }
]
onMounted(async () => {
  await GetUserList()
})
</script>